<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>KindEditor JSP</title>
    <link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="../kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" href="../js/jquery-easyui/themes/bootstrap/easyui.css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui/datagrid-detailview.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/jquery.serialize-object.js"></script>
    <script src="../js/uploadImg.js"></script>
    <link rel="stylesheet" href="../css/uploadImg.css">
    <script>
        KindEditor.ready(function(K) {
            var editor1 = K.create('textarea[name="content"]', {
                width : '100%',//宽度
                height: '700px', //高度
                cssPath : '../kindeditor/plugins/code/prettify.css',
                uploadJson : 'upFile', //上传图片
                fileManagerJson : 'upFile', //浏览图片
                allowFileManager : true, //true时显示浏览远程服务器按钮
                afterCreate : function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                }
            });
            prettyPrint();
        });
    </script>
</head>
<body style="text-align: center;">
<form name="example" method="post" action="handleFile">
    <input type="text" name="title" maxlength="120" placeholder="资讯标题" /> <br />
    <input type="text" name="code" id="code" maxlength="40" readonly="readonly" />
    <a href="#" class="easyui-linkbutton add" iconCls="icon-add" onclick="add()">上传图片</a>
    <br />
    <textarea name="" cols="100" rows="6" placeholder="资讯描述"></textarea>
    <br />
    <textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
    <br />
    <input type="submit" name="button" value="提交内容" />
</form>

<!-- 添加 -->
<div id="add_dialog" class="easyui-dialog"  closed="true"
     modal="true" style="width: 600px; padding: 10px;">
    <form  id="upBox" method="post" action="upImage">
        <div id="inputBox">
            <input type="file" name="file" title="请选择图片" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG"/>选择图片
        </div>
        <div id="imgBox">
        </div>
        <a href="#" class="easyui-linkbutton ok" iconCls="icon-add" id="btn">上传</a>
    </form>
</div>

<!-- 查看图片 -->
<div id="info_dialog" class="easyui-dialog"  closed="true"
     modal="true" style="width: 600px; padding: 10px;">
    <div class="main" style="overflow:auto;" >
    </div>
</div>
<script>

    function add(){
        $("#imgBox").html("");
        $("#add_dialog").dialog("open").dialog("center").dialog("setTitle", "上传招募图片");
        console.log($("#code"));
    }

    imgUpload({
        inputId:'file', //input框id
        imgBox:'imgBox', //图片容器id
        buttonId:'btn', //提交按钮id
        upUrl:'/upImage',  //提交地址
        data:'image', //参数名
        num:"10"//最多上传图片个数
    })
</script>
</body>
</html>